<template>
  <div class="login_container">
    <div class="loginBox">
      <div class="login-left">
        <div class="left-top">
          <div class="web-icon">
            <img src="../../assets/image/shopIconDemo.jpg" alt="" />
          </div>
        </div>
        <div class="left-center">
          <h3>LinZe!</h3>
          <span>灵感在空间里绽放，森林在城市里延深</span>
        </div>
        <div class="left-bottom">
          <h3>created by mr. web designer | all rights reserved!</h3>
        </div>
      </div>
      <div class="login-right">
        <div class="loginMainBox">
          <div class="loginMainBoxPart">
            <div class="boxTitle">
              <div class="left">
                <h3>账号密码登录</h3>
                <span>你可以使用注册的账号与设置的密码进行登录</span>
              </div>
              <div class="right">
                <div class="iconBox">
                  <i class="iconfont icon-denglu"></i>
                  <i class="suo iconfont icon-jiesuo_o"></i>
                </div>
              </div>
            </div>
            <div class="formBox">
              <el-form
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginFormRules"
                class="demo-ruleForm"
                :size="formSize"
              >
                <el-form-item prop="username">
                  <el-input
                    v-model="loginForm.username"
                    placeholder="邮箱"
                    clearable
                  />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="loginForm.password"
                    placeholder="密码"
                    clearable
                    type="password"
                    show-password
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="loginBtn">登录</el-button>
                </el-form-item>
              </el-form>
              <div class="forgetPwd">
                <el-checkbox
                  v-model="keepPassword"
                  label="记住密码"
                  size="large"
                />
                <a @click="forgetPwd">忘记密码?</a>
              </div>
            </div>
            <div class="btnBox"></div>
            <div class="forgetPasswprd"></div>
            <div class="fotterBox">
              <span>还没有账号？点击下面按钮注册吧！</span>
              <div class="btnbox">
                <div class="reBtnBox">
                  <div class="registerBtn" @click="resetLoginForm">
                    <i class="iconfont icon-zhongzhi"></i>
                  </div>
                  <span @click="resetLoginForm">重置表单</span>
                </div>
                <div class="reBtnBox">
                  <div class="registerBtn" @click="register">
                    <i class="iconfont icon-zhuce"></i>
                  </div>
                  <span @click="register">注册</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="forgetPwdDialogVisible"
      title="重置密码"
      width="30%"
      :before-close="handleClose"
    >
      <div class="forgetPwdForm">
        <el-form
          ref="updatePwdFormRef"
          :model="updatePwdForm"
          :rules="updatePwdrFormRules"
          class="demo-ruleForm"
          :size="formSize"
        >
          <el-form-item prop="email">
            <el-input
              v-model="updatePwdForm.email"
              placeholder="电子邮箱"
              clearable
              style="width: 489px; maring-right: 10px"
              @toggle="checkEmail"
              autocomplete="off"
              disabled
            >
              <template #append
                ><el-button @click="countDown" :disabled="canClick">{{
                  context
                }}</el-button></template
              ></el-input
            >
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="updatePwdForm.password"
              placeholder="输入新密码"
              clearable
              type="password"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input
              v-model="updatePwdForm.checkPass"
              placeholder="再次输入密码"
              clearable
              type="password"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="updatePwdForm.code"
              placeholder="邮箱验证码"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="resetPassword">重置密码</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { login, postCode, checkEmail, resetPassword } from "@/api/user";
import { setToken } from "@/utils/auth";
import { reg_pwd } from "@/assets/js/regex";
import { userInfo } from "@/api/user";
export default {
  setup() {
    return {};
  },
  data() {
    let checkPwd2 = (registerFormRules, value, callback) => {
      if (value.trim().length == 0) {
        callback(new Error("密码不能为空"));
      } else if (value != this.updatePwdForm.password) {
        callback(new Error("2次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      context: "发送验证码",
      totalTime: 60,
      canClick: false,
      forgetPwdDialogVisible: false,
      keepPassword: false, // 记住密码
      updatePwdForm: {
        email: "",
        password: "",
        checkPass: "",
        code: "",
      },
      loginForm: {
        // 登录的表单数据的绑定对象
        username: "",
        password: "",
      },
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱格式" },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      updatePwdrFormRules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱格式" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "change",
          },
          {
            pattern: reg_pwd,
            message: "密码需要同时使用数字与字母组合",
            trigger: "blur",
          },
        ],
        checkPass: [{ validator: checkPwd2, trigger: "blur" }],
        code: [{ required: true, message: "验证码为必填项", trigger: "blur" }],
      },
    };
  },
  mounted() {
    // 读取cookie
    this.getCookie();
  },
  methods: {
    // 记住密码保存数据
    setCookie(name, pwd, exdays) {
      var exdate = new Date(); // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    // 读取cookie
    getCookie() {
      if (document.cookie.length > 0) {
        this.keepPassword = true;
        var arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === "userName") {
            this.loginForm.username = arr2[1]; // 保存到保存数据的地方
          } else if (arr2[0] === "userPwd") {
            this.loginForm.password = arr2[1];
          }
        }
      }
    },
    countDown() {
      this.postCode();
      this.canClick = true;
      this.context = this.totalTime + "秒后重选发送";
      const timer = setInterval(() => {
        this.totalTime--;
        this.context = this.totalTime + "秒后重新发送";
        if (this.totalTime < 0) {
          clearInterval(timer);
          this.context = "重新发送";
          this.totalTime = 60;
          this.canClick = false;
        }
      }, 1000);
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
    },
    resetLoginForm() {
      // 点击重置按钮,重置登录表单
      this.$refs.loginFormRef.resetFields();
    },
    loginBtn() {
      // 点击登录按钮，跳转到Home.vue
      this.$refs.loginFormRef.validate(async (valid) => {
        // 验证登录数据
        if (!valid) {
          // 根据登录结果判断是否发起登录请求
          return (this.loginLoading = false);
        }
        this.loginForm.email = this.loginForm.username;
        login(this.loginForm).then((res) => {
          console.log(res);
          setToken(res.token);
          this.$notify({
            message: "林澤屋欢迎您！",
            title: "成功",
            type: "success",
          });
          userInfo().then((res) => {
            console.log(res);
            if (res.code === 0) {
              this.$store.commit("setUserInfo", res.user);
            }
          });
          this.$router.push("/home");
        });
      });
    },
    register() {
      // 跳转到注册界面
      this.$router.push("/register");
    },
    // 打开找回密码的对话框
    forgetPwd() {
      this.updatePwdForm.email = this.loginForm.username;
      this.forgetPwdDialogVisible = !this.forgetPwdDialogVisible;
    },
    // 检查邮箱是否可用
    checkEmail() {
      let email = this.updatePwdForm.email;
      console.log(this.updatePwdForm);
      if (email !== "" && !email && email !== "undefined") {
        checkEmail(email).then((res) => {
          console.log(res);
        });
      }
    },
    // 发送验证码，
    postCode() {
      let email = this.updatePwdForm.email;
      debugger;
      if (email !== "" && email && email !== "undefined") {
        postCode(email).then((res) => {
          console.log(res);
        });
      }
    },
    resetPassword() {
      this.$refs.updatePwdFormRef.validate(async (valid) => {
        // 验证登录数据
        if (!valid) {
          // 根据登录结果判断是否发起登录请求
          this.$message.error("填写完整表单项");
          return false;
        }
        let resetForm = {
          email: this.updatePwdForm.email,
          password: this.updatePwdForm.password,
          rePassword: this.updatePwdForm.checkPass,
          code: this.updatePwdForm.code,
        };
        resetPassword(resetForm).then((res) => {
          if (res.code === 0) {
            this.$message.success("重置密码成功");
          }
        });
        console.log(resetForm);
      });
    },
  },
};
</script>
<style lang="scss">
.login_container {
  height: 100%;
  background-color: #fff;
  .loginBox {
    max-width: none;
    min-height: 100vh;
    padding-top: 0;
    width: 100%;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    display: -webkit-flex;
    display: flex;
    box-sizing: content-box;
    .login-left {
      width: 38%;
      background-color: #244d4d;
      .left-top {
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 30px;
        .web-icon {
          height: 33px;
          width: 80px;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .left-center {
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        font-weight: 700;
        font-size: 30px;
        h3 {
          margin-bottom: 20px;
          color: #ffdb00;
        }
      }
      .left-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        height: 10%;
      }
    }
    .login-right {
      width: 62%;
      height: 100%;
      overflow: hidden;
      .loginMainBox {
        display: flex;
        flex-direction: column;
        .loginMainBoxPart {
          height: 100%;
          width: 100%;
          padding: 15% 40% 10% 17%;
          .boxTitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
              h3 {
                font-size: 26px;
                color: #111;
                font-weight: 400;
              }
              span {
                display: flex;
                margin-top: 10px;
                font-size: 19px;
                color: #484848;
              }
            }
            .right {
              margin-left: 30px;
              display: flex;
              position: relative;
              i {
                font-size: 70px;
              }
              .suo {
                position: absolute;
                top: 15px;
                right: -10px;
                font-size: 28px;
                font-weight: 700;
              }
            }
          }
          .formBox {
            .el-form {
              .el-form-item {
                height: 70px;
                .el-input__wrapper {
                  box-shadow: 0 0 0 0 !important;
                  .el-input__inner {
                    border: 0;
                    border-radius: 0;
                    width: 100%;
                    border-bottom: 1px solid #244d4d;
                    box-shadow: 0 0 0 0 !important;
                    color: #111;
                    font: normal;
                    font-family: "Courier New", Courier, monospace;
                    text-transform: none;
                  }
                }

                .el-button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  background-color: #244d4d;
                  color: #fff;
                  font-weight: 700;
                  font-size: 16px;
                  height: 56px;
                  border-radius: 30px;
                }
              }
            }
          }
          .forgetPwd {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            color: #666;
            span {
              cursor: pointer;
              &:hover {
                font-weight: 700;
              }
            }
            a {
              border-bottom: 1px solid #666;
              cursor: pointer;
            }
          }
          .fotterBox {
            display: flex;
            flex-direction: column;
            margin-top: 60px;
            color: #666;
            font-size: 14px;
            .btnbox {
              display: flex;
              .reBtnBox {
                width: 70px;
                margin-top: 40px;
                align-items: center;
                display: flex;
                flex-direction: column;
                .registerBtn {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 50px;
                  width: 50px;
                  border-radius: 50%;
                  border: 1px solid #244d4d;
                  &:hover {
                    background-color: #244d4d;
                    color: #fff;
                  }
                  i {
                    font-size: 20px;
                    font-weight: 500;
                  }
                }
                span {
                  display: flex;
                  cursor: pointer;
                  &:hover {
                    border-bottom: 1px solid #ddd;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .el-dialog {
    .forgetPwdForm {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .el-form {
        .el-form-item {
          height: 40px;
          .el-input__wrapper {
            border: 0;
            border-radius: 0;
            width: 100%;
            border-bottom: 1px solid #244d4d;
            box-shadow: 0 0 0 0;
            color: #111;
            font: normal;
            font-family: "Courier New", Courier, monospace;
            text-transform: none;
          }
          .el-input-group__append {
            box-shadow: 0 0 0 0;
            background-color: #fff;
            padding: 0;
            .el-button {
              padding: 0;
              margin: 0;
              border-radius: 0;
              border-bottom: 1px solid #244d4d;
              background-color: #244d4d;
              color: #fff;
              width: 100px;
              font-size: 12px;
              height: 32px;
              cursor: pointer;
              &:hover {
                font-weight: 700;
              }
            }
          }
          .el-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background-color: #244d4d;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            height: 56px;
            border-radius: 30px;
          }
        }
      }
    }
    .el-button {
      padding: 0;
      border: 0;
      margin: 0;
      border-radius: 0;
      border-bottom: 1px solid #244d4d;
      background-color: #244d4d;
      color: #fff;
      width: 100px;
      font-size: 12px;
      height: 32px;
      cursor: pointer;
      &:hover {
        font-weight: 700;
      }
    }
  }
}
</style>
